<template>
  <div class="content">
    <div class="query">
      <div class="title">
        查询订单
      </div>
      <div class="context">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item class="formItem" label="时间">
            <el-date-picker v-model="dateS" size="mini" unlink-panels style="width:220px;" type="daterange"  range-separator="至" start-placeholder="开始日期"
							 end-placeholder="结束日期" format="yyyy- MM- dd" value-format="yyyy-MM-dd">
							</el-date-picker>
          </el-form-item>
          <el-form-item class="formItem" label="订单状态">
            <el-select clearable v-model="value" placeholder="请选择订单状态">
             <el-option
              v-for="item in state"
              :key="item.dictId"
              :label="item.dictName"
              :value="item.dictId"
            ></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item class="formItem" label="地址">
            <levelAddr
              :province="form.province"
              :city="form.city"
              :area="form.area"
              @updateprovice="getProvince"
              @updatecity="getCity"
              @updatearea="getArea"
            ></levelAddr>
          </el-form-item> -->
          <el-form-item class="formItem" label="商品仓库">
            <el-select clearable v-model="value1" placeholder="请选择商品仓库">
              <el-option
              v-for="item in wareData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="formItem">
            <el-button type="primary" size="mini" @click="onSubmit"
              >搜索订单</el-button
            >
            <el-button type="primary" size="mini" @click="clearClick">
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="top">
      <el-row>
        <el-col :span="6"
          ><div class="left">
            <div class="title"><span>出库订单</span></div>
            <div class="date"><span>{{time}}</span></div>
            <div v-if="datas" class="text" v-for="item in datas.outOrder">
              <span>{{ item.label }}: </span>
              <span>{{ item.value }}单</span>
            </div>
          </div></el-col
        >
        <el-col :span="18"
          ><div class="right">
            <div id="chartLineBox" style="width:100%;height: 350px;"></div></div
        ></el-col>
      </el-row>
    </div>
    <div class="top">
      <el-row>
        <el-col :span="6"
          ><div class="left">
            <div class="title"><span>入库订单</span></div>
            <div class="date"><span>{{time}}</span></div>
            <div v-if="datas" class="text" v-for="item in datas.inOrder">
              <span>{{ item.label }}: </span>
              <span>{{ item.value }}单</span>
            </div>
          </div></el-col
        >
        <el-col :span="18"
          ><div class="right">
            <div id="chartLineBx" style="width:100%;height: 350px;"></div></div
        ></el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import levelAddr from "@/components/levelAddr";
import * as echarts from "echarts";
require("echarts/theme/shine");
export default {
  components: {
    levelAddr,
  },
  created() {},
  activated() {
    // this.getList();
  },
  data() {
    return {
      dateS:"",
      form:{},
      options: [],
      value: "",value1: "",
      datas: {},
      wareData: [],
      time:'',
      state:[]
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.getList();
    });
  },
  methods: {
    getList() {
      this.axios.get("/sys/v1/common/get/orderStatus/5", {}).then((res) => {
        this.state = res.data;
      });
      this.axios.post("/order/comm/commWarehouse/list",{
        pageSize:999,
        pageNo:1
      }).then((res) => {
        this.wareData = res.data.list;
      });
      this.axios
        .post("/order/warehouseCom/logisticsOrderData", {
          "endTime": this.dateS ? this.dateS[1] : "",
          "orderType": this.value,
          "startTime":this.dateS ? this.dateS[0] : "",
          "warId": this.value1
        })
        .then((res) => {
          this.datas = res.data;
          let time = new Date(res.data.startTime);
          let endTime = new Date(res.data.endTime);
          this.time = `${time.getMonth()+1}月${time.getDate()}日 - ${endTime.getMonth()+1}月${endTime.getDate()}日`
          this.drawLineDovChart();
        });
    },
    handleClose() {},
    onSubmit(e) {
      this.getList();
    },
    clearClick() {
      this.value = ""
      this.value1 = ""
      this.dateS = []
    },
    drawLineDovChart() {
      this.myLine1 = echarts.init(
        document.getElementById("chartLineBox"),
        null,
        { renderer: "svg" }
      );
      this.myLine2 = echarts.init(
        document.getElementById("chartLineBx"),
        null,
        {
          renderer: "svg",
        }
      );

      // 指定图表的配置项和数据
      let series = [];
      for (let item of Object.keys(this.datas.outOrderGraph)) {
        console.log(this.datas.outOrderGraph[item]);
        let temp = {
          name: item,
          data: this.datas.outOrderGraph[item],
          type: "line", // 类型为折线图
          lineStyle: {
            // 线条样式 => 必须使用normal属性
            normal: {
            },
          },
        }
        series.push(temp);
      }
      this.getNewArr(series);
      var option = {
        tooltip: {
          //设置tip提示
          trigger: "axis",
        },

        legend: {
          //设置区分（哪条线属于什么）
          data: Object.keys(this.datas.outOrderGraph),
        },
        color: ["#DE2D57", "#E0C381"], //设置区分（每条线是什么颜色，和 legend 一一对应）
        xAxis: {
          //设置x轴
          type: "category",
          interval: 0,
          minInterval: 1,
          boundaryGap: true, //坐标轴两边不留白
          data: [
            "1",
            "2",
            "3",
            "4",
            "5",
            "6",
            "7",
            "8",
            "9",
            "10",
            "11",
            "12",
            "13",
            "14",
            "15",
            "16",
            "17",
            "18",
            "19",
            "20",
            "21",
            "22",
            "23",
            "24",
            "25",
            "26",
            "27",
            "28",
            "29",
            "30",
            "31",
          ],
          name: "", //X轴 name
          nameTextStyle: {
            //坐标轴名称的文字样式
            color: "#000",
            fontSize: 16,
            padding: [0, 0, 0, 20],
          },
          axisLine: {
            //坐标轴轴线相关设置。
            lineStyle: {
              color: "#000",
            },
          },
        },
        yAxis: {
          name: "下单出库",
          nameTextStyle: {
            color: "#000",
            fontSize: 16,
            padding: [0, 50, 10, 0],
            fontWeight: "600",
          },
          axisLabel: {
            show: true,
            textStyle: {
              fontWeight: "600",
            },
          },

          axisLine: {
            lineStyle: {
              color: "#000",
            },
          },
          type: "value",
        },
        series: series,
      };

      // 指定图表的配置项和数据
      let series1 = [];
      for (let item of Object.keys(this.datas.inOrderGraph)) {
        series1.push({
          name: item,
          data: this.datas.inOrderGraph[item],
          type: "line", // 类型为折线图
          lineStyle: {
            // 线条样式 => 必须使用normal属性
            normal: {},
          },
        });
      }
      this.getNewArr(series1);
      var option1 = {
        tooltip: {
          //设置tip提示
          trigger: "axis",
        },

        legend: {
          //设置区分（哪条线属于什么）
          data: Object.keys(this.datas.inOrderGraph),
        },
        color: ["#DE2D57", "#E0C381"], //设置区分（每条线是什么颜色，和 legend 一一对应）
        xAxis: {
          //设置x轴
          type: "category",
          interval: 0,
          minInterval: 1,
          boundaryGap: true, //坐标轴两边不留白
          data: [
            "1",
            "2",
            "3",
            "4",
            "5",
            "6",
            "7",
            "8",
            "9",
            "10",
            "11",
            "12",
            "13",
            "14",
            "15",
            "16",
            "17",
            "18",
            "19",
            "20",
            "21",
            "22",
            "23",
            "24",
            "25",
            "26",
            "27",
            "28",
            "29",
            "30",
            "31",
          ],
          name: "", //X轴 name
          nameTextStyle: {
            //坐标轴名称的文字样式
            color: "#000",
            fontSize: 16,
            padding: [0, 0, 0, 20],
          },
          axisLine: {
            //坐标轴轴线相关设置。
            lineStyle: {
              color: "#000",
            },
          },
        },
        yAxis: {
          name: "下单入库",
          nameTextStyle: {
            color: "#000",
            fontSize: 16,
            padding: [0, 50, 10, 0],
            fontWeight: "600",
          },
          axisLabel: {
            show: true,
            textStyle: {
              fontWeight: "600",
            },
          },

          axisLine: {
            lineStyle: {
              color: "#000",
            },
          },
          type: "value",
        },
        series: series1,
      };

      // 使用刚指定的配置项和数据显示图表。
      this.myLine1.setOption(option);
      this.myLine2.setOption(option1);
      window.onresize = () => {
        this.myLine1.resize();
        this.myLine2.resize();
      };
    },
    getNewArr(series) {
      for (let item of series) {
        let tempArr = [
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
        ];
        item.data.forEach((res) => {
          res.label = res.label.substring(
            res.label.length - 1,
            res.label.length
          );
        });

        for (let i in tempArr) {
          let t = item.data.find((res) => res.label === i);
          if (t && i == t.label) {
            tempArr[i - 1] = Number(t.value);
          }
        }

        item.data = tempArr;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  font-size: 15px;
  span {
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
  }
  .div1 {
    margin-left: -16px;
    background: url(../../../../assets/breadcrumb2.png);
    width: 120px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #2d7edf;
  }
  .div2 {
    margin-left: -16px;
    background: url(../../../../assets/breadcrumb1.png);
    width: 110px;
    font-size: 13px;
    padding-left: 10px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #fff;
  }
  .query {
    background: #fff;
    padding: 10px 20px;
    .title {
      border-bottom: 1px solid #f5f5f5;
      padding-bottom: 5px;
      color: #2d7edf;
    }
    .formItem {
      display: inline-block;
      margin-right: 10px;
    }
    .context {
      margin-top: 10px;
    }
    /deep/.el-input > input {
      height: 30px;
      width: 150px;
    }
  }
  .top {
    margin-top: 10px;
    .left {
      border-right: 10px solid #f5f5f5;
      background: #fff;
      padding: 10px 20px;
      line-height: 49px;
      height: 350px;
      overflow: auto;

      .title {
      }
      .date {
        font-size: 22px;
        color: #307fdf;
      }
    }
    .left::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }
    .right {
      background: #fff;
      padding: 10px 20px;
      height: 350px;
      .chartLineBox {
      }
    }
  }
  .charBig {
    display: none;
  }
  .charBigT {
    display: inline-block;
    width: 80%;
    height: 600;
    background: #eee;
    position: fixed;
    top: 20%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    z-index: 99999;
  }
}
</style>
